<script lang="ts">

    import { goto } from "$app/navigation";
    import { stringify } from "postcss";

    function routeToPage(route: string, replaceState: boolean) {
        console.log("call routeToPage ", route, replaceState);
        goto(`${route}`, { replaceState });
    }

    import { page } from "$app/stores";
    import ValueLineRanks from "./ValueLineRanks.svelte";
    import AnalystCommentary from "./AnalystCommentary.svelte";
    import Valuation from "./Valuation.svelte";
    import AnnualRatesOfChange from "./AnnualRatesOfChange.svelte";
    import SecurityBanner from "./SecurityBanner.svelte";
    import Year3to5Projections from "./Year3to5Projections.svelte";
    import FinancialStrength from "./FinancialStrength.svelte";
    import { tooltip } from "$lib/js/tooltip";
    export let selected = "part1";
</script>

<div class="px-4">
    <div>
        <div class="mb-4">
            <div class="flex flex-row">
                <h1 class="text-gray-400 my-4 text-4xl font-extrabold  cursor-pointer mr-8" on:click={(event) => {
                    console.log("tr click event=", JSON.stringify(event));
                    routeToPage("/value_line_university", true);
                }}>Value Line University</h1>
                <h1 class="text-green-500 my-4 text-4xl font-extrabold" >Understanding Value Line Research</h1>
            </div>
            <p>
                Value Line has been providing investment research since 1931.
                Value Line was built upon our founder's passion for discipline
                and objectivity as it applied to the basic analysis of a
                company's financial statements. Value Line University was
                created to help people take that same passion and apply it to
                their own investment portfolios.
            </p>
        </div>
    </div>
    <ul class="flex flex-row my-2">
        <li
            class="flex-1  h-12 cursor-pointer {selected === 'part1'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 1: Value Line Ranks"
            on:click={(event) => {
                selected = "part1";
                console.log("got click home /", event);
            }}
        >
            Value Line Ranks
        </li>
        <li
            class="flex-1 mx-2 cursor-pointer  {selected === 'part2'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 2: Analyst's Commentary"
            on:click={(event) => {
                selected = "part2";
                console.log("got click home /", event);
            }}
        >
            Analyst's Commentary
        </li>
        <li
            class="flex-1 mr-2 cursor-pointer  {selected === 'part3'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 3: Valuation"
            on:click={(event) => {
                selected = "part3";
                console.log("got click home /", event);
            }}
        >
            Valuation
        </li>
        <li
            class="flex-1 mr-2 cursor-pointer  {selected === 'part4'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 4: Annual Rates of Change"
            on:click={(event) => {
                selected = "part4";
                console.log("got click home /", event);
            }}
        >
            Annual Rates of Change
        </li>
        <li
            class="flex-1 mr-2 cursor-pointer  {selected === 'part5'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 5: Security Banner"
            on:click={(event) => {
                selected = "part5";
                console.log("got click home /", event);
            }}
        >
            Security Banner
        </li>
        <li
            class="flex-1 mr-2 cursor-pointer  {selected === 'part6'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 6: 3- to 5-year Projections"
            on:click={(event) => {
                selected = "part6";
                console.log("got click home /", event);
            }}
        >
            3- to 5-year Projections
        </li>
        <li
            class="flex-1 cursor-pointer  {selected === 'part7'
                ? 'bg-rose-400'
                : 'bg-cyan-300'}"
            use:tooltip={{ theme: "material" }}
            title="Part 7: Financial Strength"
            on:click={(event) => {
                selected = "part7";
                console.log("got click home /", event);
            }}
        >
            Financial Strength
        </li>
    </ul>

    {#if selected === "part7"}
        <FinancialStrength />
    {:else if selected === "part6"}
        <Year3to5Projections />
    {:else if selected === "part5"}
        <SecurityBanner />
    {:else if selected === "part4"}
        <AnnualRatesOfChange />
    {:else if selected === "part3"}
        <Valuation />
    {:else if selected === "part2"}
        <AnalystCommentary />
    {:else}
        <ValueLineRanks />
    {/if}
</div>
